<template>
  <div class="admin">
    <div class="side">
      <el-menu 
        :default-active="$route.matched[2].path" 
        background-color="#1a1a2e" 
        text-color="#e6e6e6"
        active-text-color="#ffffff" 
        router
        class="custom-menu"
      >
        <el-menu-item index="/index/admin/info" class="menu-item">
          <i class="el-icon-user menu-icon"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/house" class="menu-item" v-if="$store.getters.getUserInfo.role !== 'customer'">
          <i class="el-icon-document menu-icon"></i>
          <span slot="title">房源管理</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/order" class="menu-item">
          <i class="el-icon-s-platform menu-icon"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/user" class="menu-item" v-if="$store.getters.getUserInfo.role === 'admin'">
          <i class="el-icon-user-solid menu-icon"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/feedback" class="menu-item" v-if="$store.getters.getUserInfo.role === 'admin'">
          <i class="el-icon-question menu-icon"></i>
          <span slot="title">反馈管理</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/news" class="menu-item" v-if="$store.getters.getUserInfo.role === 'admin'">
          <i class="el-icon-news menu-icon"></i>
          <span slot="title">房屋资讯</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/home" class="menu-item" v-if="$store.getters.getUserInfo.role === 'customer'">
          <i class="el-icon-s-home menu-icon"></i>
          <span slot="title">我的家</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/collect" class="menu-item" v-if="$store.getters.getUserInfo.role === 'customer'">
          <i class="el-icon-collection-tag menu-icon"></i>
          <span slot="title">我的收藏</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/release" class="menu-item" v-if="$store.getters.getUserInfo.role !== 'customer'">
          <i class="el-icon-s-promotion menu-icon"></i>
          <span slot="title">发布出租</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/myfeedback" class="menu-item" v-if="$store.getters.getUserInfo.role !== 'admin'">
          <i class="el-icon-question menu-icon"></i>
          <span slot="title">我的反馈</span>
        </el-menu-item>
        <el-menu-item index="/index/admin/password" class="menu-item">
          <i class="el-icon-unlock menu-icon"></i>
          <span slot="title">密码修改</span>
        </el-menu-item>
        <el-menu-item index="/index" class="menu-item exit-item" @click="exit">
          <i class="el-icon-switch-button menu-icon"></i>
          <span slot="title">退出登录</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    exit() {
      this.$store.commit('clearLoginInfo')
    }
  }
}
</script>

<style scoped>
.admin {
  display: flex;
  min-height: 100vh;
}

.admin .side {
  position: fixed;
  left: 0;
  top: 70px;
  z-index: 999;
  width: 220px;
  height: calc(100vh - 70px);
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.custom-menu {
  border-right: none;
  padding: 10px 0;
}

.menu-item {
  margin: 5px 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
  height: 48px;
  line-height: 48px;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(5px);
}

.menu-item.is-active {
  background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.menu-icon {
  margin-right: 10px;
  font-size: 18px;
  color: #a1a1a1;
}

.menu-item.is-active .menu-icon {
  color: #ffffff;
}

.exit-item {
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
}

.exit-item:hover {
  background-color: rgba(255, 0, 0, 0.1) !important;
}

.main {
  width: calc(100% - 220px);
  margin-left: 220px;
  min-width: 0;
  padding: 20px;
  background-color: #f5f7fa;
}
</style>